<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>留言表</title>
  <link rel="stylesheet" href="lib/layui/css/layui.css" media="all">
</head>
<body>
 
<table id="demo" lay-filter="test"></table>
<script src="lib/layui/layui.js"></script>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">回复</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  
  <!-- 这里同样支持 laytpl 语法，如： -->
  {{#  if(d.auth > 2){ }}
    <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
  {{#  } }}
</script>
<script type="text/html" id="state">
  <input type="checkbox" name="yyy" lay-skin="switch" lay-text="已读|未读" {{d.state==1?"checked":""}}>
</script>
<script>
layui.use('table', function(){
  var table = layui.table;
  var $=layui.jquery;
//工具条事件
  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data; //获得当前行数据
    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
    var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
    if(layEvent === 'del'){ //删除
      layer.confirm('确定删除行么', function(index){
    	$.ajax({
    		url:"DelMessageServlet",
    		type:"post",
    		data:{id:data.id},
    		success:function(res){
    			if(res=="1"){
    				layer.msg("删除成功");
    			}else{
    				layer.msg("删除失败");
    			}
    		}
    	});
        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
        layer.close(index);
        //向服务端发送删除指令
      });
    } else if(layEvent === 'edit'){ //编辑
    	layer.open({
  		  type: 2, 
  		  area:['450px','450px'],
  		  end:function(){
  			  table.reload("demo",{});
  		  },
  		  success: function(layero, index){
  		    var body = layer.getChildFrame('body', index);
	  		  body.find('#id').val(data.id);
	  		  body.find('#opinion').val(data.opinion);
	  		    
  		  },
  		  content: 'messageupdate.jsp'
  		}); 
    	
    	
    } else if(layEvent === 'LAYTABLE_TIPS'){
      layer.alert('Hi，头部工具栏扩展的右侧图标。');
    }
  });
  //第一个实例
  table.render({
    elem: '#demo'
    ,height: 500
    ,url: 'message' //数据接口
    ,page: false //开启分页
    ,toolbar: '#toolbarDemo'
    ,cols: [[ //表头    前边的实体类名字
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'name', title: '姓名', width:120}
      ,{field: 'phone', title: '手机号', width:120}
      ,{field: 'email', title: '电子邮箱', width:170} 
      ,{field: 'messagecontent', title: '留言内容', width: 100}
      ,{field: 'messagetime', title:'留言时间', width: 177}
      ,{field: 'state', title: '状态', width: 100, templet: '#state'}
      ,{field: 'opinion', title: '处理意见', width: 100}
      ,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'}
    ]]
  });
});
</script>
</body>
</html>